<template>
  <div>
    <!-- 牛牛，奥利给 -->
    <div
      id="dashboard"
      style="padding: 0; margin: 0"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";

export default {
  mounted() {
    this.initSomething();
  },
  methods: {
    initSomething() {
      var ROOT_PATH =
        "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";

      var chartDom = document.getElementById("dashboard");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        backgroundColor: "#000",
        globe: {
          baseTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
          heightTexture:
            ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
          displacementScale: 0.04,
          shading: "realistic",
          environment: ROOT_PATH + "/data-gl/asset/starfield.jpg",
          realisticMaterial: {
            roughness: 0.9,
          },
          postEffect: {
            enable: true,
          },
          light: {
            main: {
              intensity: 5,
              shadow: true,
            },
            ambientCubemap: {
              texture: ROOT_PATH + "/data-gl/asset/pisa.hdr",
              diffuseIntensity: 0.2,
            },
          },
        },
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style  scoped>
#dashboard {
  background-color:black;
  height: 510px;
  width: auto;
}
</style>>
